fix(Autocomplete.Overlay): prevent user-defined className from overriding default styles#7364
Conversation
…ding default styles
🦋 Changeset detectedLatest commit: e499e49 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the |
github-actions
bot
added
the
integration-tests: recommended
Prevent user-defined className from overriding default styles in Autocomplete.Overlay.
…e-overridden-by-user
github-actions
bot
requested a deployment
to
storybook-preview-7364
…e-overridden-by-user
There was a problem hiding this comment.
Pull request overview
This PR fixes a bug where user-defined className props were overriding default styles in the Autocomplete.Overlay component instead of being merged with them. The fix uses the clsx utility to properly merge CSS classes, ensuring both default and custom classes are applied.
Key changes:
- Refactored
AutocompleteOverlayto merge the user-providedclassNameprop with the defaultclasses.Overlayclass usingclsx - Re-enabled and updated the previously skipped
Autocomplete.OverlayclassName test with proper context mocking
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
packages/react/src/Autocomplete/AutocompleteOverlay.tsx |
Added clsx import and updated className handling to merge default and custom classes |
packages/react/src/Autocomplete/Autocomplete.test.tsx |
Re-enabled className test with complete AutocompleteContext mock to ensure overlay is properly rendered |
.changeset/dry-carrots-bathe.md |
Added changeset documenting the patch-level fix |
…e-overridden-by-user
…e-overridden-by-user
…e-overridden-by-user
|
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/10025 |
francinelucca
deleted the
6289-bug-autocompleteoverlay-classname-can-be-overridden-by-user
branch
2 participants
Closes https://github.com/github/primer/issues/6289
Changelog
Changed
AutocompleteOverlayto mergeclassNameprop with default style classAutocomplete.OverlayclassName test by mocking the context and usingAutocompleteContext.Providerto ensure the overlay menu is shownRollout strategy
Testing & Reviewing
Merge checklist